<template>
  <div>
    <h1>app</h1>
    <!-- 
      接口API分类 ： reset接口  非reset接口

      reset接口
      同一个路径（接口）可以做多个操作 由请求方式决定：get post put delete  一般情况用get post
      get 从服务器获取数据
      post 向服务器提交数据
      put 更新服务器已有数据
      delete 删除数据

      http://localhost:3000/classes  test接口 要是复数

      非reset接口
      一个路径对应一个操作的是非reset接口

    -->
    <button @click="postClasses">向classes提交数据</button><br/>
    <button @click="getClasses">从classes中查询数据</button><br/>
    <button @click="putClasses">put更新数据</button><br/>
    <button @click="deleteClasses">delete删除数据</button>
  </div>
</template>

<script>
import axios from "axios";
  export default {
    methods:{
      postClasses(){
        axios.post("http://localhost:3000/classes",{
          id:2,
          name:"王洋洋",
          hobby:"肤白貌美大长腿",
        }).then((res)=>{
          console.log(res);
        }).catch((err)=>{
          console.log(err);
        });
      },
      getClasses(){
        axios.get("http://localhost:3000/classes").then((res)=>{
          console.log(res);
        }).catch((err)=>{
          console.log(err);
        });
      },
      putClasses(){
        axios.put("http://localhost:3000/classes/1",{
          name:"超超",
          hobby:"爱学习"
        }).then((res)=>{
          console.log(res);
        }).catch((err)=>{
          console.log(err);
        });
      },
      deleteClasses(){
        axios.delete("http://localhost:3000/classes/2").then((res)=>{
          console.log(res);
        }).catch((err)=>{
          console.log(err);
        });
      },
    },
  };
</script>

<style lang="scss" scoped>

</style>